<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Yogette's New Reservation Form</title>
        <link type="text/css" href="<?php echo base_url(); ?>/yogette/css/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
        <script type="text/javascript" src="<?php echo base_url(); ?>/yogette/js/jquery-1.6.4.js"></script>	
        <script type="text/javascript" src="<?php echo base_url(); ?>/yogette/js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>/yogette/js/jquery-ui-timepicker-addon.js"></script>
      
        <script type="text/javascript"> 
    $(function() {$('#date').datepicker({ beforeShowDay: $.datepicker.noWeekends , dateFormat: 'mm/dd/yy', altField: '#dbdatepicker', altFormat: 'yy-mm-dd' , minDate: 0});
});

  $(function() {$( "input:submit,  button", ".submitme" ).button();});
///////////////////////////////////

function calculate()
{
    var startTime= document.getElementById("reserv_time_start").value;
    var endTime= document.getElementById("reserv_time_end").value;

    if (startTime == null || endTime == null || startTime == '' || endTime == '')
    {
        //alert("sorry please enter two Dates values");
    }
    else
    {
        //var hour = startTime.split(":");
    }
}
function changeTime()
{
  var starttime = document.getElementById("reserv_time_start").value;
  var endtime = document.getElementById("reserv_time_end").value;
  var endtimeresult = document.getElementById("reserv_time_end");
  
  //alert(""+sum_s.value);
  var temptime = starttime.split(":");
  var tempendtime = endtime.split(":");
  
  var hourstart  = temptime[0];
  var minstart = temptime[1];
  var hourend  = tempendtime[0];
  var minend  = tempendtime[1];
  
  minend = minstart;
  
  var hourstartFixed = Math.round(hourstart).toFixed(2);
  var hourendFixed = Math.round(hourend).toFixed(2);
  
  var hourstart_plus_one = parseInt(hourstartFixed) + parseInt(1);
    
    var result = hourstart_plus_one +":"+ minend;
    
    var noway = hourendFixed - hourstart_plus_one;
    if (noway > 0)
        {
           
        }
        else
        { 
            endtimeresult.value = result;
           
        }
}  

function changeEndTime()
{
  var starttime = document.getElementById("reserv_time_start").value;
  var endtime = document.getElementById("reserv_time_end").value;
  
  var temptime = starttime.split(":");
  var temp2time = endtime.split(":");
  
  var hour  = temptime[0];
  var min = temptime[1];
  
  var hour2  = temp2time[0];
  var min2 = temp2time[1];
  
  var new_number = Math.round(hour).toFixed(2);
  var new_number_2 = Math.round(hour2).toFixed(2);

  
  var end_hour = parseInt(new_number) + parseInt(1);
  var end_hour2 = parseInt(new_number_2) - parseInt(1);
  
  //min = min2;
  var result = end_hour +":"+ min2;
   
 if (new_number > new_number_2 || new_number === new_number_2)
    { 
        document.getElementById("reserv_time_end").value=result;
        
    }
 
}
//////////////////////////////////////////////////

$(function() {$('#reserv_time_start').timepicker({
     //ampm: true,
	//hourGrid: 1,
        minuteGrid: 10,
        hourMin: 9,
	hourMax: 19,
    onClose: function(dateText, inst) {
        var endDateTextBox = $('#reserv_time_end');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedTime){
        var start = $(this).timepicker('getDate');
        $('#reserv_time_end').timepicker('option', 'minDate', new Date(start.getTime()));
    }
});});
$(function() {$('#reserv_time_end').timepicker({
    //ampm: true,
        hourMin: 10,
	hourMax: 20,
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#reserv_time_start');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedTime){
        var end = $(this).timepicker('getDate');
        $('#reserv_time_start').timepicker('option', 'maxDate', new Date(end.getTime()) );
    }
});});

function reset() // done
{
    document.getElementById("reserv_time_start").value='';
    document.getElementById("reserv_time_end").value='';
    document.getElementById("date").innerHTML='';
    document.getElementById("specialdesc").innerHTML='';
}   
         </script>
         <link href="<?php echo base_url(); ?>/yogette/css/yogette.css" rel="stylesheet" type="text/css"/>

    </head>
    <body class="body-user" >
        <div class="main-wrapper-reg" style="position: relative">
            <img class="pinkcircle" src="<?php echo base_url(); ?>yogette/images/pinkCircle.jpg" />
            <div class="Container"></div>
            <div class="menulist">
                <ul class="menulist-ul">
                    <li><img class="ice-cream" src="<?php echo base_url(); ?>yogette/images/logoIcon.jpg"/><a href="../"><img src="<?php echo base_url(); ?>yogette/images/mainboard.jpg" class="home" alt="Yogette's Homepage"/></a></li>
                </ul>
            </div>
            <div class="reg-form" >
                <h1>Registration Form<span class="important-field-desc"><br/>(*)Means the field is Mandatory</span></h1>
                <!-- First will open a form to the register_user function to post the inputs -->
                <!-- define all required variables for inputs -->
                <form name="myform" action="<?php echo base_url() . 'yogette/reserve/add_new_reservation'?>" method="post">
                    <?php
                $specialdesc = array(
                    'name' => 'specialdesc',
                    'id' => 'specialdesc',
                    'value' => set_value('specialdesc')
                );
                $date= array(
                    'name' => 'date',
                    'id' => 'date',
                    'value' => set_value('date')
                );
                $dbdatepicker= array(
                    'name' => 'dbdatepicker',
                    'id' => 'dbdatepicker',
                    'value' => set_value('dbdatepicker'),
                   
                );
                $reserv_time_start = array(
                    'name' => 'reserv_time_start',
                    'id' => 'reserv_time_start',
                    'value' => set_value('reserv_time_start')
                );
                 $reserv_time_end = array(
                    'name' => 'reserv_time_end',
                    'id' => 'reserv_time_end',
                    'value' => set_value('reserv_time_end')
                );
                ?>
               
                <ul class="login_form-ul">
                    <li>
                        <label>Special Description<span class="important-field"></span></label>
                        <div>
                             <?php echo form_input($specialdesc); ?>
                        </div>
                    </li>
                    <li>
                         <label>Special Data<span class="important-field">*</span></label>
                         <div>
                             
                             <input type="text" id="date"/>
                            <input type="hidden" id="dbdatepicker" name="special_date"/>
                        </div>
                    </li>
                    <li>
                        <label>Special Start Time<span class="important-field">*</span></label>
                        <div>
                            <!--<?php// echo form_input($reserv_time_start); ?>-->
                        </div>
                    </li>
                    <li>
                        <div>
                            <input name="reserv_time_start" id="reserv_time_start" value="" type="text" ontimeupdate="compareDate()" onchange="changeTime()"/>
                            <input name="reserv_time_end" id="reserv_time_end" value="" type="text" onchange="changeEndTime()"/>
                        </div>
                    </li>
                    <li>
                        <label>Special End Time<span class="important-field">*</span></label>
                        <div>
                           <!-- <?php// echo form_input($reserv_time_end); ?>-->
                        </div>
                    </li>
                    <li>
                        <div>
                            <?php echo validation_errors(); ?>
                        </div>    
                    </li>
                     <li class="submitme"> 
                        <input type="submit" name="submit" title="Click To Add reservation Date" value="Submit new Reservs" id="submit" onclick="calculate()"/>
                        <button title="Click To Reset Dates" type="reset" onclick="reset()" >Reset-Dates</button>
                    </li>
                </ul>
                     </form>
            </div>
        </div>
            <!-- footer start-->
            <div class="pre-footer">   
            </div>
            <div class="footer">
                <div>
                    <p class="footer-p1">yogurt is healthy</p>
                </div>
                <div>
                    <p class="footer-p2">Copyright &COPY; 2010 YOGETTE.</p>
                </div>
            </div>
            <img class="post-footer" src="<?php echo base_url(); ?>yogette/blank.jpg" id="blank" name="blank" /> 
            <!-- footer ends-->

    </body>
</html>